<template>
    <view :style="{ '--color': color }">
        <status-bar :title="title"></status-bar>

        <view class="Tab">
            <u-tabs :list="list1" :lineColor="color" :inactiveStyle="inactiveStyle" :activeStyle="activeStyle" :scrollable="false" @click="click"></u-tabs>
        </view>

        <view class="list" v-for="(item, index) in pageData" :key="index">
            <view class="content">
                <image :src="$imgUrls(item.logo)" mode="aspectFill" class="logo" v-if="item.logo"></image>
                <view class="box">
                    <view class="titleState">
                        <text class="title ellipsis">{{ item.name }}</text>
                        <u-switch v-model="item.Status" @change="change($event, item)" size="20"></u-switch>
                    </view>
                    <text class="address ellipsis">{{ item.address }}</text>
                    <view class="info">
                        <view class="d-flex a-center">
                            <text class="color_66 h6">归属商品：</text>
                            <text class="color_66 h6">{{ item.goods_num }}</text>
                        </view>
                        <view class="d-flex a-center m-left30">
                            <text class="color_66 h6">待发货：</text>
                            <text class="color_66 h6">{{ item.order_num }}</text>
                        </view>
                    </view>
                </view>
            </view>

            <view class="Store">
                <view class="User">
                    <image :src="$imgUrls(item.shop_keeper.v_headimg)" mode="aspectFill" class="v_headimg" v-if="item.shop_keeper.v_headimg"></image>
                    <view class="UserInfo">
                        <text class="full_name">{{ item.shop_keeper.full_name }}</text>
                        <text class="tel">{{ item.shop_keeper.tel }}</text>
                    </view>
                </view>
                <view class="Menu">
                    <view class="lists" @click="toUrl(`Order?shop_id=${item.shop_id}`)">查看订单</view>
                    <view class="lists" @click="toUrl(`manage?shop_id=${item.shop_id}`)">管理商品</view>
                </view>
            </view>
        </view>

        <view class="addStore" @click="$beforeHouse.addHouse()">
            <view class="iconfont icon-jiahao size60 white"></view>
        </view>

        <noShopList v-if="!pageData.length"></noShopList>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import noShopList from './components/noShopList.vue';

    export default {
        components: {
            noShopList
        },
        data() {
            return {
                title: '前置仓',
                list1: [
                    {
                        name: '启动中',
                        status: 1
                    },
                    {
                        name: '停用中',
                        status: 0
                    }
                ],
                current: 0,
                status: 1,
                pageData: []
            };
        },
        onLoad() {
            this.frontShopList();
        },
        methods: {
            frontShopList() {
                this.$http
                    .get({
                        url: '/BntApi/frontShopList',
                        data: {
                            status: this.status
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data || [];
                        result.forEach((item) => {
                            item.Status = item.status == 1 ? true : false;
                        });
                        this.pageData = result;
                    });
            },
            change(e, item) {
                this.$http
                    .post({
                        url: '/BntApi/frontShopState',
                        data: {
                            shop_id: item.shop_id,
                            status: item.status == 1 ? 0 : 1
                        }
                    })
                    .then((res) => {
                        this.$Toast(res.msg);
                    });
            },
            click(e) {
                this.current = e.index;
                this.status = e.status;
                this.$pop.pageScrollTo();
                this.frontShopList();
            },
            Status(status) {
                return status == 1 ? true : false;
            }
        },
        computed: {
            ...mapState(['color']),
            activeStyle() {
                return {
                    color: this.color,
                    fontSize: '30rpx'
                };
            },
            inactiveStyle() {
                return {
                    color: '#999'
                };
            }
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $page;
        padding-bottom: 20rpx;
    }
</style>
<style lang="scss" scoped>
    .Tab {
        width: 100%;
        height: 90rpx;
        padding: 0 30rpx;
        background-color: #fff;
        border-top: 1px solid #f1f1f1;
    }
    .list {
        width: 690rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow: hidden;
        .content {
            width: 100%;
            padding: 20rpx;
            display: flex;
            align-items: center;
            .logo {
                width: 120rpx;
                height: 120rpx;
                border-radius: 10rpx;
                margin-right: 20rpx;
            }
            .box {
                flex: 1;
                height: 120rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .titleState {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    .title {
                        flex: 1;
                        color: #000;
                        font-size: 28rpx;
                    }
                }
                .address {
                    color: #666;
                    font-size: 24rpx;
                }
                .info {
                    width: 100%;
                    display: flex;
                    align-items: center;
                }
            }
        }

        .Store {
            width: 100%;
            padding: 20rpx;
            border-top: 1px solid #f1f1f1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .User {
                width: 100%;
                display: flex;
                align-items: center;
                .v_headimg {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                    margin-right: 16rpx;
                }
                .UserInfo {
                    display: flex;
                    flex-direction: column;
                    .full_name {
                        color: #666;
                        font-size: 26rpx;
                    }
                    .tel {
                        color: #666;
                        font-size: 24rpx;
                        margin-top: 8rpx;
                    }
                }
            }
            .Menu {
                display: flex;
                align-items: center;
                .lists {
                    width: 140rpx;
                    height: 50rpx;
                    background-color: var(--color);
                    color: #fff;
                    font-size: 24rpx;
                    margin-left: 14rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 6rpx;
                }
                .lists:first-child {
                    margin-left: 0;
                }
            }
        }
    }
    .addStore {
        width: 70rpx;
        height: 70rpx;
        background-color: var(--color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        right: 10rpx;
        bottom: 20%;
    }
</style>
